﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="a.aspx.cs" Inherits="BaseWeb.Test.a" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;
        }
        table td
        {
            border: 1px solid #DDDDDD;
            empty-cells: show;
        }
    </style>

    <script src="../Script/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            var objMid = $("td[id$='tdMid']");
            var objLeft = $("td[id$='tdLeft']");
            var objBody = $("td[id$='tbBody']");
            //鼠标移入
            objMid.mouseover(function()
            {
                objMid.css({
                    "background": "#D9E8FB"
                });
            });
            //鼠标移除
            objMid.mouseout(function()
            {
                objMid.css({
                    "background": ""
                });
            });
            //鼠标按下
            objMid.mousedown(function(e)
            {
                var width = objMid.css("width");
                var top = "0px";
                var left = objLeft.css("width");
                var height = objBody.css("height");
                //创建一个层用来移动
                var f_div = $("<div id='m_Div' style='width:5px;height:400px;top:0px;left:152px;background:gray;position:absolute;'></div>").appendTo($("body"));

                //                var offset = objMid.offset();
                //                var p_X = e.pageX - offset.left;



                //绑定鼠标移动事件
                f_div.bind("mousemove", function(e)
                {
                    var lab = $("#labMousePosition");
                    lab.val(e.pageX);
                    f_div.css("left", e.pageX);
                });


            });

            //            //鼠标松开
            //            objMid.mouseup(function(e)
            //            { 
            //                if (isMove)
            //                {
            //                    var objLeft = $("td[id$='tdLeft']");
            //                    objLeft.css({
            //                        "width": e.pageX + "px"
            //                    });
            //                    isMove = false;
            //                }
            //                //解绑鼠标移动事件
            //                objMid.unbind("mousemove");
            //            });


        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <table id="tbBody" style="width: 100%; height: 400px;" cellpadding="0" cellspacing="0">
        <tr>
            <td id="tdLeft" style="width: 150px;">
                tdLeft
            </td>
            <td id="tdMid" style="width: 3px;">
                &nbsp;
            </td>
            <td id="tdRight">
                tdRight
                <asp:Label ID="labMousePosition" runat="server" Text="&nbsp;"></asp:Label>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
